import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Card, Space, Button, Form, Input } from 'antd';
import { useEffect, useState, FC } from 'react';

const Index: FC = () => {
  // const [obj, setObj] = useState({ name: 'zhangmou', password: '123' });

  // todo form是表单实例
  const [form] = Form.useForm();
  // todo forceUpdate可以用来做强制更新
  // const [, forceUpdate] = useState({});
  // To disable submit button at the beginning.
  // useEffect(() => {
  //   forceUpdate({});
  // }, []);

  // const onFinish = (values: any) => {
  //   console.log('Finish:', values);
  // };

  // todo form实例是一个很多函数组成的对象
  const fn = () => {
    // todo getFieldsValue获取表单的值
    // console.log(form.getFieldsValue());

    // todo getFieldValue获取单个表单的值
    // console.log(form.getFieldValue('name'));

    // todo getFieldError获取错误字段的错误信息
    // console.log(form.getFieldError('name'));

    // todo getFieldsError获得全部错误信息
    // console.log(form.getFieldsError());

    // todo isFieldsTouched判断是否被用户操作过
    // console.log(form.isFieldsTouched(true));

    // todo resetFields用于清空表单
    // form.resetFields();

    // todo 修改表单内容的时候，不能使用setState，需要使用setFieldsValue
    // setObj({ name: 'zhangmou2', password: '123435547' });
    // form.setFieldsValue({ name: 'zhangmou2', password: '123435547' });

    form
      .validateFields()
      .then((values) => {
        console.log(values);
      })
      .catch((err) => {
        return err;
      });
  };

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="登录行内表单">
        <Form
          form={form}
          name="horizontal_login"
          // todo 横向表单
          layout="inline"
          // todo 当form里面的submit的按钮被点击的时候触发
          // todo 不需要使用受控组件
          // onFinish={onFinish}
          initialValues={{ name: 'zhangmou', password: '123' }}
        >
          <Form.Item
            // todo 表单里面的每一项都用Item组件包住
            // todo name属性就是最终拿到的结果对象的字段名称
            // todo rules表示匹配规则
            name="name"
            rules={[
              { required: true, message: 'Please input your username!' },
              // { max: 13, message: '最大长度为13!' },
              // { pattern: /^1[3578]\d{9}$/, message: '请输入正确的手机号!' },
            ]}
            // label="姓名"
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          {/* <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              disabled={
                !form.isFieldsTouched(true) ||
                !!form.getFieldsError().filter(({ errors }) => errors.length)
                  .length
              }
            >
              Log in
            </Button>
          </Form.Item> */}
        </Form>

        <Button type="primary" onClick={fn}>
          Log in
        </Button>
      </Card>
    </Space>
  );
};

export default Index;
